<template>
    <div class="back-ground">
        <my-card style="width: 444px;
        position: relative;overflow: hidden" :class="{ 'shake-horizontal': isShake}">
            <div style="padding: 40px 40px 0 40px;">
                <div style="font-size: 26px;font-weight: 600">
                    嘿，你好
                </div>
                <div style="color: #9EA0A5;margin-bottom: 34px">
                    让我们从登陆开始
                </div>
                <a-form :form="form"
                        @submit="handleSubmit">
                    <div style="font-size: 12px;color: #9EA0A5;">
                        用户名/邮箱:
                    </div>
                    <a-form-item>
                        <a-auto-complete @search="handleSearch"
                                         style="height: 38px"
                                         backfill
                                         :dataSource="result" id="user-name" class="">
                            <a-input style="height: 38px"
                                     v-decorator="['username',{rules: [{ required: true,message: '请输入用户名/邮箱' }]}]"/>
                        </a-auto-complete>
                    </a-form-item>
                    <div style="font-size: 12px;color: #9EA0A5">密码：</div>
                    <a-form-item>
                        <a-input
                                type="password"
                                v-decorator="['password',{rules: [{ required: true,message: '请输入密码' }]}]"
                                style="height: 38px">
                            <a-icon slot="suffix" type="eye-invisible"
                                    style="color: #9EA0A5"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <my-button color="green" type="block" html-type="submit">
                            登陆
                        </my-button>
                    </a-form-item>
                </a-form>
                <div style="text-align: center;color: #9EA0A5;font-size: 14px;">
                    或者从第三方登陆
                </div>
            </div>
            <div class="login-more">
                <div class="login-more-item">
                    <a-icon type="github"/>
                    <span>
                        GitHub
                    </span>
                </div>
                <div class="login-more-item"
                     style="border-left: 1px solid #EAEDF3;border-right: 1px solid #EAEDF3">
                    <a-icon type="qq"/>
                    <span>
                        QQ
                    </span>
                </div>
                <div class="login-more-item">
                    <a-icon type="google"/>
                    <span>
                        Google
                    </span>
                </div>
            </div>
        </my-card>
        <div style="margin-top: 27px;text-align: center;color: #9EA0A5">
            还没有帐号？
            <span @click="signIn"><a>注册</a></span>
            <div style="margin-top: 14px">
                忘记了您的密码?
                <span><a href="/">重置密码</a></span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Login',
        data () {
            return {
                formLayout: 'horizontal',
                result: [],
                username: '',
                isShake: false,
                form: this.$form.createForm(this),
            };
        },
        methods: {
            signIn () {
                console.log('12312321321');
                this.$router.push('/signIn');
            },
            handleSubmit (e) {
                e.preventDefault();
                this.form.validateFields(async (err, data) => {
                    if (!err) {
                        // 构造请求
                        const fromData = new FormData();
                        fromData.append('userName', data.username);
                        fromData.append('pwd', data.password);
                        const loginData = await this.$apis.login(fromData);
                        this.isShake = false;
                        if (loginData.userType==='admin') {
                            loginData.menus = [
                                {title: '管理员主页', path: '/admin/home'},
                                {title: '编辑中活动', path: '/admin/editing'},
                                {title: '历史活动', path: '/admin/event/success'},
                            ];
                            localStorage.setItem('loginUser', JSON.stringify(loginData));
                            await this.$store.commit('createUser', loginData);
                            this.$router.push('/admin/home');
                        } else {
                            loginData.menus = [
                                {title: '主页', path: '/home'},
                                {title: '日历', path: '/calendar'},
                                {title: '个人', path: '/Profile'},
                            ];
                            localStorage.setItem('loginUser', JSON.stringify(loginData));
                            await this.$store.commit('createUser', loginData);
                            this.$router.push('/home');
                        }
                    } else {
                        this.isShake = true;
                        setTimeout(()=>{
                            this.isShake = false;
                        }, 200);
                    }
                });
            },
            handleSearch (value) {
                let result;
                if (!value || value.indexOf('@') >= 0) {
                    result = [];
                } else {
                    result = ['gmail.com', '163.com', 'qq.com']
                        .map((domain) => `${value}@${domain}`);
                }
                this.result = result;
            },
        },
    };
</script>

<style scoped lang="scss">
    .login-more {
        margin-top: 26px;
        border-top: 1px solid #EAEDF3;
        height: 60px;
        width: 100%;
        display: flex;
        justify-content: space-evenly;

        .login-more-item {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 0 30px;
            font-size: 20px;
            color: #9EA0A5;
            flex: 1;
            transition: all 0.3s;

            &:hover {
                color: #1F6FE5 !important;
            }

            span {
                margin-left: 16px;
                font-weight: 500;
                font-size: 14px !important;
            }
        }
    }

    .back-ground {
        width: 100%;
        height: 100vh;
        background-color: #FBFBFD;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #user-name /deep/ .ant-select-selection {
        height: 100% !important;
    }
</style>
